<template>
  <div class="ranks">
    <nav-bar title="排行"></nav-bar>
    <rank-list v-if="!!rankMale" :rank-list="rankMale" rank-type="0"></rank-list>
    <rank-list v-if="!!rankFemale" :rank-list="rankFemale" rank-type="1"></rank-list>
    <tab-bar></tab-bar>
    <loading v-model="loading"></loading>
  </div>
</template>
<script>
import { Loading } from 'vux';
import { getRanks } from '@/store/api';
import NavBar from '@/components/NavBar';
import TabBar from '@/components/TabBar';
import RankList from '@/components/RankList';

export default {
  components: {
    NavBar,
    TabBar,
    RankList,
    Loading
  },
  data() {
    return {
      rankFemale: '',
      rankMale: '',
      loading: false
    };
  },
  created() {
    this.getRank();
  },
  methods: {
    getRank() {
      this.loading = true;
      getRanks().then(
        (res) => {
          this.loading = false;
          if (!!res.body.ok) {
            this.rankFemale = res.body.female;
            this.rankMale = res.body.male;
          } else {
            this.$vux.toast.show({
              text: '获取失败',
              width: '7.6em',
              type: 'text'
            });
          }
        },
        () => {
          this.loading = false;
          this.$vux.toast.show({
            text: '网络错误，请重试',
            type: 'text'
          });
        }
     );
    },
  }
};
</script>
<style lang="scss" scoped>
  .ranks {
    padding-top: 43px;
    padding-bottom: 56px;
  }
</style>
